<template>
  <el-container>
    <el-header class="elementViewHeader">
      <!-- <el-button type="primary" @click="goToAdmin">去管理员界面</el-button> -->
      <div class="header-right">
        <el-input v-model="searchValue" placeholder="请输入搜索关键字" class="input"></el-input>
        <el-button type="primary" @click="goToSearchPage" class="selectBtn">搜索</el-button>
      </div>

      <div class="header-left">

        <div v-if="isLogged"> {{ username }}</div>

        <el-button-group>
          <el-button type="primary" @click="goToLogin">登录</el-button>
        </el-button-group>
      </div>

    </el-header>

    <el-container>
      <el-aside width="200px">
        <el-menu default-active="2" class="el-menu-vertical-demo" background-color="#f7f7f7" text-color="#000000"
          active-text-color="#2775b6">
          <el-menu-item>
            <span style="font-weight:bold;font-size: 20px;">whx论坛系统</span>
          </el-menu-item>
          <el-submenu>
            <template slot="title">
              <i class="el-icon-notebook-1"></i>
              <span slot="title" style="font-weight:bold;font-size: 18px;">分类</span>
            </template>
            <el-menu-item v-for="(module, index) in modules" :key="module.moduleId" :index="index + 2"
              @click="handleMenuItemClick(module.moduleName)">
              <i class="el-icon-notebook-2"></i>
              <span slot="title">{{ module.moduleName }}</span>
            </el-menu-item>
          </el-submenu>

        </el-menu>
      </el-aside>

      <el-main>
        <el-table :data="articles">
          <el-table-column prop="module" label="类别" width="140"></el-table-column>
          <el-table-column prop="poster" label="作者" width="120"></el-table-column>
          <el-table-column prop="content" label="帖子"></el-table-column>
          <el-table-column prop="postTime" label="发布时间" width="100"></el-table-column>
          <el-table-column width="100">
            <template slot-scope="scope">
              <el-button @click="goToPostPage(scope.row.postId)">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      searchValue: "",
      isLogged: false,
      username: "whx",
      modules: [],
      articles: []
    };
  }, mounted() {
    this.$axios.get('https://localhost:44300/api/Module/getAll')
      .then(response => {
        this.modules = response.data.response;
      })
      .catch(error => {
        console.error(error);
      });

    this.$axios.get('https://localhost:44300/api/Post/getAll')
      .then(response => {
        this.articles = response.data.response;
      })
      .catch(error => {
        console.error(error);
      });
  },
  methods: {
    goToSearchPage() {
      if (this.searchValue.trim() === '') {
        // 如果搜索框为空则不跳转到搜索页面
        return;
      }
      this.$router.push('/searchPage')
      // 根据 this.searchValue 进行搜索
    },
    goToAdmin() {
      this.$router.push("/adminMain");
    },
    goToLogin() {
      this.$router.push("/login");
    },
    goToRegister() {
      this.$router.push("/register")
    },
    goToPostPage() {
      this.$router.push("/postPage")
    },
    goToUserInformation() {
      this.$router.push("/userInformation")
    },
    handleLogout() {
      // this.isLogged = false;
      this.$router.push('/login');
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(() => {
          done();
        })
        .catch(() => { });
    }
  },
};
</script>

<style scoped>
.elementViewHeader {
  line-height: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #f7f7f7;
  box-shadow: 0 0 5px #aaa;
}

.header-left {
  display: flex;
  align-items: center;

}

.header-right {
  display: flex;
  align-items: center;
  margin: auto;
}

.el-aside {
  background-color: #f7f7f7;

  box-shadow: -5px 0px 5px -5px #aaa;
}

.dropdown {
  margin-right: 20px;
}

.input {
  width: 350px;
  margin-right: 10px;
}

.selectBtn {
  width: 100px;
}
</style>
